<template>
  <div class="gears-wrapper">
    <div :class="['title', disabled ? 'title-disabled' : '']">{{ title }}</div>
    <div>
      <div :class="['slider-tag', disabled ? 'slider-disabled' : '']">
        <div
          v-for="item in titleItems"
          :key="item.id"
          :class="sliderVal == item.id ? 'active' : ''"
        >
          {{ item.title }}
        </div>
      </div>
      <van-slider
        v-model="sliderVal"
        :step="1"
        :min="1"
        :max="3"
        :disabled="disabled"
        @change="onSliderChange"
      />
    </div>
  </div>
</template>

<script>
import { device } from 'aliyun-livinglink-sdk'
export default {
  name: 'GearPannel',
  components: {},
  props: {
    title: String,
    gearsKey: String,
    disabled: Boolean,
    deviceIdentidy: Object,
    levelVal: Number,
    windLevel: Number,
    airLevel: Number,
    warmLevel: Number
  },
  watch: {
    levelVal: {
      handler(val) {
        if (this.gearsKey == 'airChangeGear') {
          this.sliderVal = Number(val) - 3
        } else {
          this.sliderVal = val
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      titleItems: [
        {
          title: '低档',
          id: 1
        },
        {
          title: '中档',
          id: 2
        },
        {
          title: '高档',
          id: 3
        }
      ],
      sliderVal: 1,
      wind: 1,
      air: 4,
      warm: 1
    }
  },
  methods: {
    onSliderChange(value) {
      console.log(this.gearsKey, value, 'gearsKey')
      if (this.gearsKey == 'airChangeGear') {
        value = value + 3
      }
      device.setProps(this.deviceIdentidy, {
        [this.gearsKey]: value
      })
    }
  }
}
</script>

<style scoped lang="less">
.gears-wrapper {
  background-color: #fff;
  padding: 15px 15px 30px 15px;
  .title {
    margin-bottom: 15px;
    color: #2b3852;
    font-size: 16px;
    font-weight: bold;
  }
  .title-disabled {
    color: rgba(43, 56, 82, 0.5);
  }
  .van-slider {
    width: calc(100% - 24px);
    margin: 0 12px;
  }
  .slider-tag {
    display: flex;
    margin-bottom: 18px;
    & > div:nth-child(2) {
      flex: 1;
      text-align: center;
    }
    & > div.active {
      color: var(--primary-color);
    }
  }
  .slider-disabled {
    & > div {
      color: #e6eaf2;
    }
    & > div.active {
      color: #e6eaf2;
    }
  }
}
</style>
